<template>
  <div class="login">
    <van-nav-bar title="返回" left-arrow @click-left="$router.back()" />
    <div class="logins">
      <h1>register</h1>
      <h2>your account</h2>
      <van-form ref="form" class="loginGroup">
        <div class="van-cell-group">

          <van-field v-model="form.user" name="user" :rules="userRules" label="用户名" placeholder="用户名" />

          <van-field v-model="form.pwd" name="password" :rules="pwdRules" type="password" label="密码" placeholder="密码" />
        </div>

        <van-button id="button" round block native-type="submit" @click="loginSubmit">提交</van-button>
      </van-form>
    </div>


  </div>
</template>

<script>
import httpApi from '@/http'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      form: {
        user: '',
      },
      token: '',
      userRules: [
        {
          validator: value => {
            return /^\w{3,15}$/.test(value)
          },
          message: '请输入正确的用户名',
          trigger: 'onBlur'
        }
      ],
      pwdRules: [
        {
          validator: value => {
            return /^\w{6,15}$/.test(value)
          },
          message: '请输入正确的密码',
          trigger: 'onBlur'
        }
      ],
    }
  },
  methods: {
    ...mapMutations(['saveToken', 'saveUser']),
    loginSubmit() {
      console.log('当前输入的账号信息:', this.form);
      this.$refs.form.validate().then(async () => {

        httpApi.userApi.loginApi(this.form).then(res => {

          const pwdErrorConut = 3
          if (res.data.code == 200) {
            this.$router.push('/home/myuser')
            console.log('登录后的信息:', this.form);

            this.$toast.success('登录成功')
            console.log(res);
            let user = res.data.data.user[0] //关闭跳转后 可以查看到表单信息就是user下标为0的数组
            console.log('user:', user);
            this.saveUser(user)
            // TODO
            //保存token res.data.data.token
            let token = res.data.data.token
            this.saveToken(token)

          } else if (res.data.code == 1001) {
            // console.log('密码输入错误');
            console.log('密码输入错误信息', res);

            this.$toast.fail(`密码输入错误${res.data.errorcount
              }次,还剩${pwdErrorConut - res.data.errorcount}次机会`)

            if (pwdErrorConut - res.data.errorcount == 0) {
              this.$toast.fail('您的账号已被锁定,请30s后重试')
              return

            }
            return
          } else if (res.data.code == 1002) {
            console.log('账号输入错误信息', res);
            // console.log('账号输入错误');
            this.$toast.fail('账号输入错误')
            return
          }


        })
      }).catch(() => {
        this.$toast.fail('登录失败')
      })

    }
  },
}
</script>

<style lang="scss">
.login {
  .logins {
    display: flex;
    width: 100%;
    height: 800px;
    background-color: black;
    background-image: url(../../assets/register.jpeg);
    background-position: 100%;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    color: aliceblue;

    h1 {
      margin-top: 150px;
    }

    h2 {
      margin-bottom: 50px;
    }

    .loginGroup {
      >.van-cell-group {
        background-color: transparent;

        >.van-field {
          border-radius: 100px;
          margin: 30px 0;
          width: 280px;
          background-color: transparent;

          input {
            color: aliceblue;
          }

        }

      }

      >#button {
        width: 270px;
        height: 50px;
        border-radius: 100px;
        background: linear-gradient(to right, #FF2B72, #FFE357);
        font-weight: bold;
        padding: 15px;
        color: rgb(255, 240, 254);
        border: 1px solid transparent;
      }
    }
  }
}
</style>